<template>
  <div class="PlayList">
    <div class="songlist-tag">
      <div class="section">
        <div class="container">
          <PlayListTags
            :TagCategory="TagCategory"
            @tagClick="tagClick"
          ></PlayListTags>
        </div>
      </div>
    </div>
    <div class="song-lists" id="m-songList">
      <div class="section">
        <div class="container">
          <div class="song-list-title">
            <SectionHead
              :titleSize="'32px'"
              :href="'javascript:;'"
              :icon="'jiantouyou'"
              :isCustomMore="true"
            >
              <template v-slot:title>
                {{ TagCategory.cat }}
                <a :href="oUrl" v-if="TagCategory.cat !== '全部'">
                  <i class="iconfont icon-guanbi"></i>
                </a>
              </template>
              <template v-slot:more>
                <div class="part_switch" v-switchClick="onSwitchSortId">
                  <!-- <a class="part_switch_on" href="javascript:;" data-sort="hot"
                    >最热</a
                  >
                  <a href="javascript:;" data-sort="new">最新</a> -->
                </div>
              </template>
            </SectionHead>
          </div>
          <div class="song-list-cont">
            <SongList
              :cat="TagCategory.cat"
              :itemid="TagCategory.itemid"
              :sort="TagCategory.sort"
            ></SongList>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Service from "@/services";
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

import PlayListTags from "@/components/PlayList/PlayListTags/index";
import SongList from "@/components/PlayList/SongList/index";
import switchClick from "./directives/switchBool";
export default {
  name: "PlayList",
  directives: {
    switchClick, // switch{最新、默认} 自定义指令
  },
  components: {
    PlayListTags,
    SongList,
  },
  setup() {
    const service = new Service(),
      router = useRouter(),
      state = reactive({
        switchBool: "part_switch_on",
        oUrl: "/v1/playlist",
        TagCategory: {
          // TagCategory 全局属性
          cat: "全部",
          liId: 0,
          itemid: -1,
          isPop: "",
          data: null,
          sort: "hot",
        },
      });

    onMounted(() => {
      setTagCategory();
      gethref();
    });

    /**
     * 获取url地址
     */
    const gethref = () => {
      let href = router.currentRoute.value.hash;
      if (href) {
        let arr = RegExpHref(href);
        state.TagCategory.liid = parseInt(arr.liid);
        state.TagCategory.cat = arr.cat;
        state.TagCategory.itemid = arr.itemid;
        if (arr.isPop) {
          state.TagCategory.isPop = arr.isPop;
        }
      } else {
        state.TagCategory = {
          cat: "全部",
          liId: 0,
          itemid: 0,
          isPop: "",
          data: null,
          sort: "hot",
        };
      }
    };

    // 解析#后面的数据并返回一个数组
    const RegExpHref = (href) => {
      let arr = href.slice(1, href.length).split("&");
      let arr2 = new Array(),
        oArr;
      for (oArr in arr) {
        let op1 = arr[oArr].split("=")[0];
        let op2 = arr[oArr].split("=")[1];
        arr2[op1] = op2;
      }
      return arr2;
    };

    // Tag点击事件
    const tagClick = (item) => {
      state.TagCategory.cat = item.cat;
      state.TagCategory.liid = item.liid;
      state.TagCategory.isPop = item.isPop;
      state.TagCategory.itemid = item.itemid;
    };

    // 最新、默认 id 的回调 （自定义指令）
    const onSwitchSortId = (sort) => {
      state.TagCategory.sort = sort;
    };

    // 获取TagCategory数据
    const setTagCategory = async () => {
      let data = await service.getSongListTags();
      state.TagCategory.data = data;
    };

    return {
      ...toRefs(state),
      tagClick,
      onSwitchSortId,
    };
  },
};
</script>

<style lang='scss' scoped>
.PlayList {
  .songlist-tag {
    padding: 30px 0;
    background-color: #f2f2f2;
  }
  .song-lists {
    margin: 50px auto 28px;
    .part_switch {
      height: 40px;
      line-height: 40px;
      border-radius: 2px;
      a {
        position: relative;
        display: inline-block;
        padding: 0 16px;
        height: 38px;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        border-color: #c9c9c9;

        &.part_switch_on {
          background-color: $ThemeColor;
          border-color: $ThemeColor;
          color: #fff;
        }
      }
    }
    .song-list-title {
      a {
        position: relative;
        color: #999;
        font-size: 12px;
        i {
          position: absolute;
          top: -20px;
          left: 5px;
        }
      }
    }
  }
}
</style>
